<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { useUserInfoStore } from '@/stores/userInfo'
import {getScByStudentIdService } from '@/api/sc'
import { getByIdService} from '@/api/course'
import { getAssignmentListByCourseIdService } from '@/api/assignment'
const userInfoStore = useUserInfoStore()
let data = userInfoStore.userInfo
const userInfo = ref({
  ...data,
})

const barChartData = ref([]);
const lineChartData = ref([]);
const stuId = userInfo.value.id;  
const drawBarChart = () => {
  const barChartDom = document.getElementById('barChart');
  const myBarChart = echarts.init(barChartDom);
  
  const option = {
    title: {
      text: '每日作业发布情况',
      left: 'center'
    },
    xAxis: {
    type: 'category',
    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
  },
  yAxis: {
    type: 'value',
    minInterval: 1,
    max: function (value) {
    return value.max + 4;
}
  },
  series: [
    {
      data: barChartData.value,
      type: 'line'
    }
  ]
  };

  myBarChart.setOption(option);
};

const drawLineChart = () => {
  const lineChartDom = document.getElementById('lineChart');
  const myLineChart = echarts.init(lineChartDom);

  const option = {
    title: {
      text: '本学年课程作业分布情况',
      left: 'center'
    },
    tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: '50%',
      data: lineChartData.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
  };
  myLineChart.setOption(option);
};
const fetchChartData = async () => {
  try {
    let courseIdResponse = await getScByStudentIdService(stuId);
    const courseIdsData = courseIdResponse.data; // 假设返回的数据是课程ID数组
    const courseIds = courseIdsData.map(item => item.couId);  
     // 初始化每日作业计数
     const assignmentCounts = {
     星期一: 0,
      星期二: 0,
      星期三: 0,
      星期四: 0,
      星期五: 0,
      星期六: 0,
      星期天: 0
    };
    for (const couId of courseIds) {
      const courseResponse = await getByIdService(couId);
      const assignments = await getAssignmentListByCourseIdService(couId); // 获取作业信息
      //console.log(assignments.data);
      assignments.data.forEach(assignment => {
        const dueDate = new Date(assignment.dueDate); 
        const day = dueDate.toLocaleString('zh-CN', { weekday: 'long' });
        if (assignmentCounts[day] !== undefined) {
          assignmentCounts[day] += 1; // 增加对应星期的计数
          }
      });
      // 将课程名和作业数量推入
      lineChartData.value.push({
        name: courseResponse.data.name, // 课程名称
        value: assignments.data.length           // 作业数量
      });
    }
     // 填充 barChartData
     barChartData.value = [
      assignmentCounts['星期一'],
      assignmentCounts['星期二'],
      assignmentCounts['星期三'],
      assignmentCounts['星期四'],
      assignmentCounts['星期五'],
      assignmentCounts['星期六'],
      assignmentCounts['星期天']
    ];
    drawBarChart();
    drawLineChart();
    } catch (error) {
      console.error('数据获取失败:', error);
    }
};

onMounted(() => {
    fetchChartData()
});
</script>

<template>
    <div class="charts-container" style="padding: 20px;">
      <div class="chart" id="barChart" style="width: 60%; height: 400px;"></div>
      <div class="chart" id="lineChart" style="width: 50%; height: 400px;"></div>
    </div>
  </template>
<style scoped>
.charts-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 在两张图之间分配空间 */
}

.chart {
  flex: 1; /* 每个图表占据均分空间 */
  margin: 10px; /* 设置间距 */
}
</style>
